<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Flowable demo</title>
	<style>
		html, body{
			width: 100%;
			height: 100%;
			overflow-x:hidden;
			margin: 0;
			padding: 0;
			font-size: 12px;
			box-sizing: border-box;
		}
		body{
			padding: 15px;
		}
		h2{
			font-size:22px;
			padding:10px 30px;
			color:#333;
		}
		p{
			font-size:14px;
			padding:10px 30px;
			color:#333;
			text-indent:2em;
			margin: 0;
		}
		.demo-tabs{
			margin-bottom: 18px;
			border-bottom: 1px solid #ccc;
		}
		.demo-tabs .demo-ele{
			display: inline-block;
			padding: 10px 30px;
			margin-left: 5px;
			border: 1px solid #e8e8e8;
			border-bottom: 0;
			background-color: #e8e8e8;
			margin-bottom: -1px;
			cursor: pointer;
		}
		.demo-tabs .demo-ele[selected="selected"]{
			background-color: #fff;
			color: #000;
		}
		.demo-tabs .demo-ele:hover{
			opacity: 0.7;;
		}
		#demo-iframe{
			width: 100%;
			height: calc(100% - 132px);
			margin: 0;
			padding: 0;
			border: 0;
		}
	</style>
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?da613541f2704950dc2bfc647cfea191";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
</head>
<body>
	<h2>Flowable 演示</h2>
	<!--<div class="demo-tabs">
		<span class="demo-ele" data-url="/path/demo2">带搜索功能的动态数据</span>
		<span class="demo-ele" data-url="/path/demo1">静态数据</span>
		<span class="demo-ele" data-url="/path/demo3">jquery环境</span>
		<span class="demo-ele" data-url="/path/react">React环境</span>
		<span class="demo-ele" data-url="/path/angular">Angular环境</span>
		<span class="demo-ele" data-url="/path/vue">Vue环境</span>
		<span class="demo-ele" data-url="/path/demo4">多表 I18N</span>
	</div>-->

	<div class="demo-tabs">
		<span class="demo-ele" data-url="/path/process">流程部署</span>
		<span class="demo-ele" data-url="/path/instance">流程实例</span>
		<span class="demo-ele" data-url="/path/myTask">待我处理</span>
		<!--<span class="demo-ele" data-url="/path/iWithTask">已处理</span>-->
		<span class="demo-ele" data-url="/path/historicTask">已完成</span>
	</div>

	<iframe id="demo-iframe"></iframe>
	<script type="text/javascript">
		[].forEach.call(document.querySelectorAll('.demo-ele'), function(v, i){
			v.addEventListener('click', function () {
				document.querySelector('#demo-iframe').src = this.getAttribute('data-url');
				[].forEach.call(document.querySelectorAll('.demo-ele'), function(v2, i2){
					v2.removeAttribute('selected');
				});
				this.setAttribute('selected', 'selected')
			});
		});
		document.querySelector('.demo-ele').click();
	</script>
</body>
</html>
